<!-- 工作经历 -->
<template>
	<view class="professional">
		<view class="BasicsBox2">
			<view class="title">
				公司名称
			</view>
			<u--input v-model="user.CompanyName" placeholderClass="userName" placeholder="请填写"
				:customStyle="{'font-weight':600}" fontSize="16px" @change="val=>checkOB('CompanyName',val)"
				border="none"></u--input>
		</view>
		<view class="BasicsBox2">
			<view class="title">
				职位名称
			</view>
			<u--input v-model="user.PositionName" placeholderClass="userName" placeholder="请填写"
				:customStyle="{'font-weight':600}" fontSize="16px" @change="val=>checkOB('PositionName',val)"
				border="none"></u--input>
		</view>
		<view class="BasicsBox2">
			<view class="title">
				当前月薪(元)
			</view>
			<u--input v-model="user.Wage" placeholderClass="userName" placeholder="请填写"
				:customStyle="{'font-weight':600}" fontSize="16px" @change="val=>checkOB('Wage',val)"
				border="none"></u--input>
		</view>
		<view class="BasicsBox" @click="zhiwei">
			<view class="leftBox">
				<view class="">
					职位类别
				</view>
				<view class="Address" :style="{color:user.PositionName1?'#000':'#C1C1C1'}">
					{{user.PositionName1?user.PositionName1:'请选择'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
		<view class="BasicsBox" @click="nengliMD">
			<view class="leftBox">
				<view class="">
					能力标签
				</view>
				<view class="Address" :style="{color:tagsMD(user.Tags)?'#000':'#C1C1C1'}">
					{{tagsMD(user.Tags)?tagsMD(user.Tags):'请选择'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			checkOB(name, value) {
				let user = JSON.parse(JSON.stringify(this.user))
				user[name] = value
				this.$emit('update:user', user)
			},
			zhiwei() {
				let data = {}
				data.titleName = '职位类别'
				data.Content = '您选择的职位类别将用于为您推荐更合适的岗位'
				data.title = 'leibie'
				uni.navigateTo({
					url: '/pages/views/packageC/type-recruit/zhiwei/zhiwei-page?data=' + JSON.stringify(data)
				})
			},
			getValue(val) {
				let user = JSON.parse(JSON.stringify(this.user))
				user.PositionName1 = val.FullName
				user.PositionId = val.Id[val.Id.length - 1]
				user.Category3 = val.Id[2] ? val.Id[2] : ''
				user.Category2 = val.Id[1] ? val.Id[1] : ''
				user.Category1 = val.Id[0]
				this.$emit('update:user', user)
			},
			nengliMD() {
				uni.navigateTo({
					url: "/pages/views/packageC/type-recruit/zhiwei/zhiwei-page?data=" + JSON.stringify({
						title: 'guanjianci',
						titleName: '能力标签',
						Content: '您选择的能力标签将用于为您推荐更合适的岗位'
					})
				});
			},
			tagsMD(val) {
				let da = ''
				if (val ? val.length : false) {
					val.forEach((val2, k) => {
						da = da + val2.FullName
						if (k < val.length - 1) {
							da = da + '、'
						}
					})
				}
				return da
			}
		},
		props: {
			user: {
				typeof: Object,
				default: {
					Tags: []
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.userName {
		font-weight: 600;
		color: #C1C1C1 !important;
		font-size: 32rpx;
	}

	.professional {
		display: flex;
		flex-direction: column;
		font-family: PingFang SC-Medium;
		color: #333;

		.xian {
			border-top: 4rpx solid #000;
			width: 20rpx;
			margin: 0rpx 20rpx;
		}

		.BasicsBox {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E7E7E8;

			.leftBox {}

			.Address {
				margin-top: 16rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.RightBox {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				font-weight: 600;

				.tag {
					box-sizing: border-box;
					padding: 10rpx 0rpx;
					width: 140rpx;
					text-align: center;
					background-color: #F7F8FA;
					margin-right: 10rpx;
					border-radius: 8rpx;
				}

				.checkTag {
					color: #3476FE !important;
					border: 1rpx solid #3476FE !important;
					background-color: #F1F8FF !important;
				}
			}
		}

		.BasicsBox2 {
			display: flex;
			flex-direction: column;
			font-size: 26rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E7E7E8;

			.title {
				margin-bottom: 20rpx;
			}
		}
	}
</style>